// 主要颜色
$mainColor: #0081ff;
// 输入框阴影
$inputShadow: #DCDFE6;
//hover颜色
$hoverColor: #3c9dff;
//禁用颜色
$disabledColor: #a0cfff;

ul,
ol {
  list-style: none;
}

// 基础的公共样式
.f-mt-20 {
    margin-top: 20px;
}

.f-mb-20 {
    margin-bottom: 20px;
}

.f-mr-20 {
    margin-right: 20px;
}

.f-ml-20 {
    margin-left: 20px;
}

.f-flex {
    display: flex;
    .f-flex-1{
        flex: 1;
    }
}

.f-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.f-flex-around {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.g-flex-ct {
    display: flex;
    align-items: center;
}

.f-flex-ct {
    display: flex;
    align-items: center;
    justify-content: center;
}

#nprogress .bar {
    background: $mainColor !important;
}

.el-input__wrapper {
    box-shadow: 0 0 0 1px $inputShadow !important;
}

.el-textarea__inner {
    box-shadow: 0 0 0 1px $inputShadow !important;
}

.el-input-group__append {
    padding: 0 !important;
    box-shadow: 0 0 0 1px $inputShadow !important;
}


.el-pagination.is-background .el-pager li.is-active {
    background-color: $mainColor !important;
}

// .el-button--primary {
//     background-color: $mainColor !important;
//     color: #ffffff !important;
// }

// .el-button.is-disabled {
//     background-color: $disabledColor !important;
//     color: #a5a5a5 !important;
// }

.el-form-item {
    display: block !important;
}

.el-form-item__content {
    flex-wrap: nowrap !important;
}

.el-link--primary {
    color: $mainColor !important;
}

.el-dropdown-menu__item:not(.is-disabled):focus {
    color: $mainColor !important;
}

.el-checkbox__input.is-checked+.el-checkbox__label {
    color: $mainColor !important;
}

.el-breadcrumb__inner a:hover,
.el-breadcrumb__inner.is-link:hover {
    color: $mainColor !important;
}

.el-tabs__item.is-active {
    color: $mainColor !important;
}

.el-tabs__active-bar {
    background-color: $mainColor !important;
}

.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
    width: auto !important;
}

.w-card {
    background-color: #ffffff;
    box-shadow: 0 0 10px #e0e0e0;
}


//指示器
.indicator-box {
    position: fixed;
    right: 5px;
    top: calc(50% - 12.5px);
    z-index: 10;

    .indicator-item {
        background-color: $disabledColor;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s;

        &:not(:first-of-type) {
            margin-top: 5px;
        }
    }

    .active-indicator {
        background-color: $mainColor;
    }
}